<template>
	<view class="container">
		
		
		<!-- #ifndef MP-WEIXIN -->
			<view class="user-info-wrapper" v-if="authToken">
				<view class="user-avatar">
					<u-avatar :src="`http:${userInfo.head}`"></u-avatar>
				</view>
				<view class="user-info">
					<view class="">
						昵称:{{userInfo.nickname}}
					</view>
					<view class="">
						我的积分:{{userInfo.points}}
					</view>
				</view>
			</view>
		<!-- #endif -->
		<!-- 微信登录后的页面 -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="user-info-wrapper" v-if="wxToken">
			<view class="user-avatar">
				<u-avatar :src="wxUser.avatarUrl"></u-avatar>
			</view>
			<view class="user-info">
				<view class="">
					昵称:{{wxUser.nickName}}
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="user-info-wrapper" v-else>
			<view class="user-avatar">
				<u-icon name="account-fill" size="40"></u-icon>
			</view>
			<view class="user-info">
				<view class="">
					昵称
				</view>
				<view class="">
					我的积分
				</view>
			</view>
		</view>
		
		
		
		<view class="order-info-wrapper">
			<view class="">
				全部订单
			</view>
			<view class="">
				查看全部订单
			</view>
		</view>
		<view class="order-status-wrapper">
			<view class="wrapper">
				<view class="item">
					<i class="iconfont icon-daishouhuo"></i>
					<text>待收货</text>
				</view>
				<view class="item">
					<i class="iconfont icon-a-zhifuqianbaodaizhifu"></i>
					<text>待支付</text>
				</view>
				<view class="item">
					<i class="iconfont icon-daipingjia"></i>
					<text>待评价</text>
				</view>
			</view>
		</view>
		<view class="list-wrapper">
			<view class="item" v-for="(item,index) in list" :key="index" @click="go(item)">
				<view class="">
					{{item.title}}
				</view>
				<view class="">
					<i class="iconfont icon-xiangyou"></i>
				</view>
			</view>
		</view>
		<view class="btn-wrapper">
			<!-- #ifndef MP-WEIXIN -->
				<u-button type="primary" color="#E51B19" class="gologinBtn" v-if="authToken" @click="logout">安全退出</u-button>
				<u-button type="primary" color="#E51B19" class="gologinBtn" @click="goLogin" v-else>登录/注册</u-button>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
				<u-button type="primary" color="#E51B19" class="gologinBtn" @click="getUserProfile">微信一键登录</u-button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapState,mapActions}=createNamespacedHelpers('users')
	const {mapState:mapWxUserState,mapMutations:mapWxUserMutations}=createNamespacedHelpers('wxUser')
	export default {
		data() {
			return {
				list: [{
						title: '个人资料',
						path:'/pages/userCenter/userCenter'
					},
					{
						title: '收货地址',
						path:'/pages/addr/addr'
					},
					{
						title: '绑定手机'
					},
					{
						title: '修改密码'
					},
					{
						title: '我的收藏'
					}
				]
			}
		},
		computed:{
			...mapState(['authToken','userInfo']),
			...mapWxUserState(['wxUser','wxToken'])
		},
		methods: {
			...mapActions(['safeLogoutAsync']),
			...mapWxUserMutations(['SET_WXUSERINFO','SET_WXToken']),
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			async logout(){
				const {confirm}=await uni.showModal({
					title:'您确定姚安全退出吗'
				})
				if(confirm)this.safeLogoutAsync(this.userInfo.uid)
			},
			go(arg){
				uni.navigateTo({
					url:arg.path
				})
			},
			//打开微信授权窗口，获取微信用户的信息,该方法在2.27.1之前可以有弹框授权窗口效果，之后没有效果了
			getUserProfile(){
				uni.getUserProfile({
					desc:'完善用户信息',
					success: (res) => {
						//调用状态机中mutatation方法完成将用户微信用户信息保存到本地存储中
						console.log('----',res.userInfo);
						this.SET_WXUSERINFO(res.userInfo)
						this.getToken(res.userInfo)
					}	
				})
			},
			async getToken(userInfo){
				const {code}=await uni.login();
				console.log('code',code);
				console.log('userInfo',userInfo);
				uni.request({
					method:'POST',
					url:'http://127.0.0.1:3006/api/users/wxLogin',
					data:{
						code,
						userInfo
					},
					success: (res) => {
						console.log('res',res.data.data.token);
						this.SET_WXToken(res.data.data.token)
					},
					fail(err) {
						console.log('err',err);
					}
				})
				
			}
			
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #EFEFEF;

		.user-info-wrapper {
			@include flex-box(start, center, row) padding-left: 50rpx;
			width: 750rpx;
			height: 270rpx;
			background: linear-gradient(to right, #C01E14, #EE331F);

			.user-avatar {
				@include flex-box(center, center, row) width: 120rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 50%;
			}

			.user-info {
				margin-left: 50rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}

		.order-info-wrapper {
			font-size: 26rpx;
			box-sizing: border-box;
			@include flex-box(between, center, row) width: 750rpx;
			height: 80rpx;
			border-bottom: 1rpx solid #f5f5f5;
			padding: 10rpx 20rpx;
		}

		.order-status-wrapper {
			@include flex-box(center, center, row) width: 750rpx;
			height: 140rpx;

			.wrapper {
				@include flex-box(around, center, row) width: 750rpx;
				height: 100%;
				background-color: #fff;

				.item {
					@include flex-box(center, center, column) .iconfont {
						font-size: 60rpx;
						color: #f00;
					}

					text {
						font-size: 24rpx;
					}
				}

			}
		}

		.list-wrapper {
			margin-top: 30rpx;

			.item {
				box-sizing: border-box;
				font-size: 30rpx;
				@include flex-box(between, center, row);
				padding: 0rpx 60rpx;
				width: 750rpx;
				height: 80rpx;
				background-color: #fff;
				border-bottom: 1rpx solid #f5f5f5;
			}
		}

		.btn-wrapper {
			padding-top: 30rpx;
			width: 750rpx;
			height: 350rpx;
			background-color: #fff;
			.gologinBtn {
				width: 504rpx;
			}
		}

	}
</style>
